<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="请输入店铺名称" @input='shopValue' />
				<view class="screen">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/finance/screen.png" mode="heightFix"></image>
					</view>
					<view class="font24" @click="getData">
						筛选
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="box">
			<view class="order">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item,index) in shopData" :key="index" @click="to(item.id)">
						<view class="image">
							<image :src="item.business_license" mode="aspectFit"></image>
						</view>
						<view class="shopInfo">
							<view class="title font30 fontw">
								{{item.title}}
							</view>
							<view class="phone font24">
								简介:{{item.attestation}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0, //初始化滚动高度
				list: [],
				shopData: [],
				keyword: '',
				lun: 0
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			async getData() {
				const data = await this.$api.finance.StoreLst({
					keyword: this.keyword,
				})
				if (data.length > 20) {
					this.list = data
					this.shopData = data.splice(0, 20)
				} else {
					this.shopData = data
				}

			},
			shopValue(e) {
				this.keyword = e.detail.value
			},
			// 滚动到底部
			scrolltolower() {
				this.lun = this.lun + 1
				const num = Number(this.lun) * 20
				if (this.list.length > num) {
					this.shopData = data.splice(num, 20)
				} else {
					this.lun = this.lun - 1
					uni.showToast({
						icon: 'error',
						title: '暂无更多',
						duration: 1000
					})
				}
			},
			// 跳转
			to(id) {
				uni.navigateTo({
					url: '/finance/pages/material/materialD?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {


		.header {
			width: 100%;
			background-color: #fff;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}
		}

		.box {
			padding: 12rpx 30rpx;

			// 订单
			.order {

				.scroll-Y {
					height: calc(100vh - var(--status-bar-height) - 98rpx);

					.item {
						margin-bottom: 28rpx;
						background-color: #fff;
						border-radius: 16rpx;
						padding: 12rpx 22rpx;

						.image {
							border-radius: 24rpx;
							overflow: hidden;
							margin-bottom: 28rpx;

							image {
								width: 100%;
								height: 240rpx;
							}
						}

						.shopInfo {
							.title {
								display: -webkit-box;
								-webkit-line-clamp: 1;
								/* 显示的行数 */
								-webkit-box-orient: vertical;
								overflow: hidden;
							}

							.phone {
								color: #666666;
								display: -webkit-box;
								-webkit-line-clamp: 3;
								/* 显示的行数 */
								-webkit-box-orient: vertical;
								overflow: hidden;
							}
						}
					}
				}
			}
		}
	}
</style>